<template>
  <!--账号安全-->
  <div>
    <carousel :autoplaySpeed="autoplaySpeed" :Img="Img"></carousel>
    <div class="wrapper">
      <Row :gutter="16">
        <i-col span="6">
          <ngn :data="data" :activeIndex="activeIndex"></ngn>
        </i-col>
        <i-col span="18">
          <div class="com">
            <p class="p">
              <Icon type="ios-pin"/>
              <span>您现在的位置是:</span><span class="span">{{data.title}}</span><span> > </span><span
              class="span">账号安全</span>
            </p>
          </div>
          <div style="padding: 10px 0">
            <p style="padding: 5px 50px"><span style="font-size:14px;display:inline-block;width: 80px">原密码：</span><Input
              type="password" v-model="password1" style="width: 300px"/></p>
            <p style="padding: 5px 50px"><span style="font-size:14px;display:inline-block;width: 80px">新密码：</span><Input
              type="password" v-model="password2" style="width: 300px"/></p>
            <p style="padding: 5px 50px"><span
              style="font-size:14px;display:inline-block;width: 80px">确认密码：</span><Input type="password"
                                                                                         v-model="password3"
                                                                                         style="width: 300px"/></p>
            <p style="padding: 5px 50px">
              <Button type="primary" @click="confirm">确认</Button>
            </p>
          </div>
        </i-col>
      </Row>
    </div>
  </div>
</template>

<script>
  import carousel from '../module/carousel'
  import ngn from '../module/ngn'

  export default {
    components: {
      carousel, ngn
    },
    data() {
      return {
        URL: this.$api.url,
        activeIndex: 3,
        autoplaySpeed: 100000,
        workTrendLink: '',
        Img: [
          {
            id: 1,
            imageLocation: require('../../assets/img/u69.jpg'),
            state: true,
            uri: "",
          },
        ],
        data: {
          title: '个人中心',
          list: [
            {list: '个人信息', link: 'personalInformation',},
            {list: '稿件直投', link: 'ManuscriptDirectInvestment',},
            {list: '稿件评估', link: 'TheManuscriptEvaluation',},
            {list: '账号安全', link: 'accountSecurity',},
            {list: '投诉建议', link: 'complaintAndAdvice',},
          ],
        },
        password1: '',
        password2: '',
        password3: '',
      }
    },
    methods: {
      confirm() {
        const role = localStorage.getItem('ms_userid');
        if (this.password1 != '' && this.password2 != '' && this.password3 != '') {
          if (this.password2 == this.password3) {
            let password = {
              id: role,
              OPwd: this.password1,
              pwd: this.password2,
            };
            this.$axios({
              method: 'POST',
              headers: {'Content-Type': 'application/json;charset=UTF-8'},
              data: JSON.stringify(password),
              url: this.URL + '/user/UPCode',
            }).then((res) => {
              if (res.data.data == true) {
                this.$Message.warning('密码修改成功！');
              } else {
                this.password1 = '';
                this.$Message.warning('原密码错误！');
              }
            })
          } else {
            this.$Message.warning('密码不一致！');
          }
        } else {
          this.$Message.warning('不能为空！');
        }
      }
    },
  }
</script>

<style scoped>
  .com .p {
    padding: 10px 0;
    font-size: 16px;
    font-weight: bold;
    border-bottom: 1px solid #000;
  }

  .span {
    padding: 0 10px;
  }
</style>
